<template>
  <div class="card-section">
    <div class="card">
      <div class="inner-top mb-4 gap-col-8 font-weight-500 line-height-120">
        <div class="font-size-16">{{ title }}</div>
        <div class="font-size-20">
          US${{ price }} <span class="font-size-14">/{{ priceLabel }}</span>
        </div>
        <div class="d-flex gap-row-4 align-center">
          <div class="font-size-14">{{ billLabel }}</div>
          <div v-if="saveLabel" class="font-size-10 badge">{{ saveLabel }}</div>
        </div>
      </div>
      <div class="inner-bottom gap-col-12">
        <div class="d-flex font-size-14 font-weight-500 line-height-120">
          <Icon name="checkWhiteBg" class="mr-1"></Icon>
          <div>{{ $t('premium.card.list1') }}</div>
        </div>
        <div class="d-flex font-size-14 font-weight-500 line-height-120">
          <Icon name="checkWhiteBg" class="mr-1"></Icon>
          <PremiumStar class="mr-1"></PremiumStar>
          <div>{{ $t('premium.card.list4') }}</div>
        </div>
        <div class="d-flex font-size-14 font-weight-500 line-height-120">
          <Icon name="checkWhiteBg" class="mr-1"></Icon>
          <div>{{ $t('premium.card.list2') }}</div>
        </div>
        <div class="d-flex font-size-14 font-weight-500 line-height-120">
          <Icon name="checkWhiteBg" class="mr-1"></Icon>
          <div>{{ $t('premium.card.list3') }}</div>
        </div>
        <div class="d-flex font-size-14 font-weight-500 line-height-120">
          <Icon name="checkWhiteBg" class="mr-1"></Icon>
          <div>{{ $t('premium.card.list5') }}</div>
        </div>
      </div>
      <button
        v-if="isMobile"
        @click="handleBuy"
        class="w-100 primary-btn font-size-14 font-weight-500 line-height-140 primary-gradient pointer"
      >
        {{ buttonLabel }}
      </button>
    </div>
    <div class="pc-btn">
      <button
        v-if="!isMobile"
        @click="handleBuy"
        class="w-100 primary-btn font-size-14 font-weight-500 line-height-140 primary-gradient pointer"
      >
        {{ buttonLabel }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import PremiumStar from '@/components/common/PremiumStar.vue'

const props = defineProps({
  title: String,
  price: Number,
  priceLabel: String,
  billLabel: String,
  saveLabel: String,
  buttonLabel: String,
  onBuy: Function,
})

const appStore = useAppStore()
const { isMobile } = storeToRefs(appStore)

const handleBuy = () => {
  props.onBuy()
}
</script>

<style lang="scss" scoped>
.wrapper {
  .content {
    .card {
      width: 100%;
      padding: 0.875rem 1rem;
      border-radius: 0.635rem;
      box-shadow: 0 0 0.4375rem 0 #ff0f00ad;
      background: #181925;
      position: relative;
      .inner-top {
        display: flex;
        flex-direction: column;
      }

      .badge {
        padding: 0.125rem 0.5rem;
        border-radius: 0.625rem;
        background: rgb(var(--v-theme-primary));
      }
    }

    .card::before {
      content: '';
      position: absolute;
      top: -0.0625rem;
      left: -0.0625rem;
      right: -0.0625rem;
      bottom: -0.0625rem;
      border-radius: inherit;
      padding: 0.0625rem;
      background: linear-gradient(180deg, #f95e0e -40%, #e717b3 112.5%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: destination-out;
      mask-composite: exclude;
      pointer-events: none;
    }
  }
}

.desktop {
  .wrapper {
    .content {
      .card-section {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        .card {
          width: 35.625rem;
          margin-bottom: 1rem;
          .inner- {
            &top {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            }
            &bottom {
              padding: 0 7rem;
            }
          }
        }
        .pc-btn {
          width: 35.625rem;
          margin-bottom: 2rem;
        }
      }

      .pc-btn {
        width: 29.375rem;
      }
    }
  }
}
.mobile {
  .wrapper {
    .content {
      .card {
        margin-bottom: 2rem;
        .inner- {
          &top {
            justify-content: start;
            text-align: start;
          }
          &bottom {
            margin-bottom: 1.5rem;
          }
        }
      }
    }
  }
}
</style>
